import { updState } from '@/services/orders';
import { returnAdd, selectSaleAddress } from '@/services/returnOrders';
import { Button, Form, Input, message, Modal, Select } from 'antd';
import { useCallback, useEffect } from 'react';
import styles from '../index.less';

type Props = {
  visible: boolean;
  handleCancel: () => void;
  orderId: string;
  getList: () => void;
};

const ReturnGoods: React.FC<Props> = ({ visible, handleCancel, orderId, getList }) => {
  const [form] = Form.useForm();
  const { Option } = Select;
  const colorThem = localStorage.getItem('color') || '#1a7721';

  // form初始值
  const getInitValues = () => {
    return {
      logisticsCompany: '中国邮政',
    };
  };

  const selectAddress = useCallback(async () => {
    if (orderId) {
      try {
        await selectSaleAddress({ orderId: orderId }).then((res) => {
          form.setFieldsValue({
            saleAddress: `${res.province} ${res.city} ${res.area} ${res.addressDetail}`,
          });
        });
      } catch (error) {
        console.log(error);
      }
    }
  }, [form, orderId]);

  useEffect(() => {
    selectAddress();
  }, [selectAddress]);

  const addReturn = async (values: any) => {
    try {
      await updState({ id: orderId, state: '9' }).then(async () => {
        await returnAdd(values).then(() => {
          handleCancel();
          getList();
          message.success('退货成功!');
        });
      });
    } catch (error) {
      console.log(error);
    }
  };

  const onFinish = async () => {
    let values = await form.validateFields();
    values.orderId = orderId;

    Modal.confirm({
      centered: true,
      content: '是否确认退货？',
      okText: '退货',
      cancelText: '取消',
      onOk: () => addReturn(values),
    });
  };

  return (
    <Modal
      visible={visible}
      onCancel={() => {
        handleCancel();
        form.resetFields();
      }}
      footer={[
        <>
          <Button
            onClick={() => {
              handleCancel();
              form.resetFields();
            }}
            className={styles.btnCancel}
          >
            取消
          </Button>
          <Button
            className={styles.btnSeal}
            style={{ background: `${colorThem}`, width: 120, color: '#fff' }}
            htmlType="submit"
            type="primary"
            onClick={onFinish}
          >
            新建
          </Button>
        </>,
      ]}
      closable={false}
      className={styles.modalsStyle}
      width={540}
      title={'退货单'}
      centered={true}
    >
      <div className={styles.modalContent}>
        <Form
          onFinish={onFinish}
          form={form}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 40 }}
          initialValues={getInitValues()}
        >
          <Form.Item
            label="商家地址"
            name="saleAddress"
            validateTrigger="onBlur"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input autoComplete="off" disabled />
          </Form.Item>
          <Form.Item
            label="物流公司"
            name="logisticsCompany"
            rules={[
              {
                required: true,
                message: (
                  <div>
                    <img src={require('@/assets/images/error.png')} width={14} alt="错误" />
                    请选择物流公司
                  </div>
                ),
              },
            ]}
          >
            <Select
              placeholder="请选择物流公司名称"
              // disabled={logisticsValues?.logisticsCompany}
            >
              <Option key={'1'} value="中国邮政">
                中国邮政
              </Option>
              <Option key={'2'} value="顺丰快递">
                顺丰快递
              </Option>
              <Option key={'3'} value="圆通速递">
                圆通速递
              </Option>
            </Select>
          </Form.Item>
          <Form.Item
            label="物流单号"
            name="logisticsCode"
            validateTrigger="onBlur"
            rules={[
              {
                required: true,
                message: (
                  <div>
                    <img src={require('@/assets/images/error.png')} width={14} alt="错误" />
                    请输入物流单号
                  </div>
                ),
              },
              {
                pattern: new RegExp(/^[0-9A-Za-z]{10,20}$/),
                message: (
                  <div>
                    <img src={require('@/assets/images/error.png')} width={14} alt="错误" />
                    请输入10-20个数字或英文
                  </div>
                ),
              },
            ]}
          >
            <Input
              placeholder="请输入物流单号"
              autoComplete="off"
              // disabled={logisticsValues?.logisticsCode}
            />
          </Form.Item>
        </Form>
      </div>
    </Modal>
  );
};

export default ReturnGoods;
